<template>
  <div>
    <van-nav-bar :title="title" fixed @click-left="gotoback" class="myhead">
      <template #left v-if="back">
        <slot>
          <van-icon name="arrow-left" size="36" class="icon"></van-icon>
        </slot>
      </template>
      <template #right>
        <van-popover
          v-model="showPopover"
          theme="dark"
          trigger="click"
          :actions="actions"
          @select="onSeltct"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" size="36" class="icon"></van-icon>
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-action-sheet
      v-model="show"
      :actions="actionslist"
      cancel-text="取消"
      close-on-click-action
    />
  </div>
</template>

<script>
export default {
  name: "myhead",
  data() {
    return {
      show: false,
      showPopover: false,
      actions: [
        {
          text: "搜索",
          value: "search",
          icon: "search",
          disabled: this.search,
        },
        { text: "登录", value: "login", icon: "fire-o", disabled: this.login },
        {
          text: "我的",
          value: "mine",
          icon: "user-circle-o",
          disabled: this.mine,
        },
        { text: "操作", value: "action", icon: "smile-o" },
      ],
      actionslist: [{ name: "拍照" }, { name: "扫码" }, { name: "地理定位" }],
    };
  },
  methods: {
    onSeltct(item) {
      console.log(item);
      if (item.value == "action") {
        this.show = true;
      } else {
        this.gotopage(item.value);
      }
    },
    gotoback() {
      this.$router.go(-1);
    },
  },
  props: {
    title: String,
    search: Boolean,
    login: Boolean,
    mine: Boolean,
    back: {
      type: Boolean,
      default: false,
    },
  },
};
</script>


<style lang="scss" scoped>
.myhead {
  z-index: 1000;
  .icon {
    font-size: 20px !important;
  }
}
</style>